<template>
  <div class="messageaccount">
    <div class="messageaccount-tabs">
      <div class="messageaccount-tabs-search">
        <div>露天账号</div>
        <div class="messageaccount-tabs-search-ibs">
          <el-input
            class="messageaccount-tabs-input"
            size="small"
            v-model="searchinput"
          />
          <el-button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="clicksearchinput"
            >查询</el-button
          >
        </div>
      </div>

      <el-menu class="el-menu-vertical-demo messageaccount-menu">
        <el-scrollbar height="97%" view-style="height: 100%;">
          <el-menu-item
            v-for="(item, index) in accounts"
            :key="index"
            :index="index"
            :disabled="isItemDisabled(item)"
            @click="clickmenuitem(item)"
          >
            <el-badge
              :value="item.unreadnum"
              :offset="[10, 13]"
              :show-zero="false"
            >
              {{ item.label }}
            </el-badge>
          </el-menu-item>

          <!-- <el-menu-item v-for="item in 100" :key="item" :index="item">
            {{ item }}
          </el-menu-item> -->
        </el-scrollbar>
      </el-menu>
    </div>

    <div
      class="message-content"
      v-loading="messageloading"
      element-loading-text="消息实时更新中..."
      :element-loading-spinner="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-empty v-if="contactsList.length == 0" description="暂无数据" />
      <Contacts v-else />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, provide, inject } from "vue";
import Contacts from "@/views/message/contacts.vue";
import { ElMessage } from "element-plus";

import { ipc } from "@/utils/ipcRenderer";
import { ipcApiRoute } from "@/api/main.js";

const accounts = inject("accounts");
const contactsList = ref([]);
const activeaccount = ref({});
provide("contactsList", contactsList);
provide("activeaccount", activeaccount);

const searchinput = ref("");

const messageloading = ref(false);
const svg = `
        <path class="path" d=" 
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const isItemDisabled = (item) => {
  return item.cookie == "";
};

const clicksearchinput = () => {
  // console.log(searchinput.value);
  if (searchinput.value != '') {
    let foundIndex2 = accounts.value.findIndex(
    (item3) => item3.label === searchinput.value
  );
  if (foundIndex2 !== -1) {
    const foundItem = accounts.value[foundIndex2];

    accounts.value.splice(foundIndex2, 1); // 先移除该对象
    accounts.value.unshift(foundItem); // 再插入到数组的第一位
  } else {
    ElMessage.error('没有查询到对应的账号')
  }
  }
  
};

const clickmenuitem = (item) => {
  // console.log(item);
  activeaccount.value = item;
  contactsList.value = [];
  messageloading.value = true;
  ipc
    .invoke(ipcApiRoute.getmessagecontacts, {
      userid: item.bid_rid,
      cookie: item.cookie,
    })
    .then((res) => {
      messageloading.value = false;
      if (res != "") {
        let resjson = JSON.parse(res);
        contactsList.value = resjson.list;
      } else {
        ElMessage.error("请检查代理后重试");
      }
    });
};

onMounted(() => {
  // console.log(accounts.value);
});
</script>

<style scoped>
.messageaccount {
  width: 98%;
  height: 95%;
  padding: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-right: 0 !important;
  display: flex;
}
.messageaccount-tabs {
  min-width: 150px;
  width: 15%;
  height: 90%;
}

.messageaccount-tabs-search-ibs {
  display: flex;
  align-items: center;
}
.messageaccount-tabs-input {
  flex: 1;
  margin: 10px 5px;
}
.messageaccount-menu {
  height: 99%;
}
.messageaccount-tabs-search {
  height: 10%;
  min-height: 60px;
  border-right: 1px solid #dcdfe6;
}

.message-content {
  display: flex;
  height: 100%;
  width: 85%;
  min-width: calc(100% - 150px);
  justify-content: center;
  align-items: center;
}
</style>